<template lang="html">
  <div class="editor">
    <div ref="editor" class="text"></div>
   <!-- <div>
      {{editorContent}}
    </div>-->
  </div>
</template>

<script>
  import E from 'wangeditor'

  export default {
    name: 'Editorbar',
    data () {
      return {
        editorContent: 'sssssssssssssssss'
      }
    },
    props: {
      value: {
        type: String,
        default: this.editorContent
      },
      isClear: {
        type: Boolean,
        default: false
      }
    },

    mounted () {
      this.seteditor()
    },
    methods: {
      setContent(content){
        this.editor.txt.html(content)
      },
      clearContent(){
        this.editor.txt.clear()
      },
      seteditor () {
        this.editor = new E(this.$refs.editor)

        this.editor.customConfig.uploadImgServer = 'http://39.98.165.4:8004/ronhe-file-system/file/editor/upload'// 配置服务器端地址
        this.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名
        this.editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024 // 将图片大小限制为 2M
        this.editor.customConfig.uploadImgMaxLength = 200 // 限制一次最多上传 3 张图片
        this.editor.customConfig.uploadImgTimeout = 3 * 60 * 10000 // 设置超时时间

        this.editor.customConfig.onchange = (html) => {
          this.editorContent = html
          this.$emit('childByValue', this.editorContent)
        }
        // 创建富文本编辑器
        this.editor.create()

      }
    }
  }
</script>

<style lang="scss" scoped>
  .editor {
    width: 100%;
  }

  .toolbar {
    border: 1px solid #ccc;
  }

  .text {
  }
</style>
